import './ZL.scss'
import { Button, Modal, Divider } from 'antd'
import { Http } from '../../../../Common/Api'
import { useEffect, useState, useRef } from 'react'
import { useRequest, useBoolean } from 'ahooks'

export const ZLBox = ({ ZL_ADMIN, UserEvent, ZLEvent }) => {
    const Ref = useRef()
    const ip = 'cmsv.e-jt.cn'
    const port = '6605'

    const [Open, { setTrue, setFalse }] = useBoolean(false)

    const [SDK, setSDK] = useState()
    const [jsession, setJsession] = useState()
    const [UserList, setUserList] = useState({})
    const [UserSelect, setUserSelect] = useState([])

    const { runAsync: getZLJsession } = useRequest(Http, {
        manual: true,
        onSuccess: res => {
            setJsession(res.jsession)
            getZLOnline({ url: 'getZLOnline', data: { jsession: res.jsession } })
            // getZLPosition({ url: 'getZLPosition', data: { jsession: res.jsession } })
        },
    })
    const { runAsync: getZLOnline } = useRequest(Http, {
        manual: true,
        onSuccess: res => setUserList(res.onlines.reduce((acc, item) => ({ ...acc, [item.abbr]: item.online }), {})),
    })

    useEffect(() => {
        UserEvent.emit(UserList)
    }, [UserEvent, UserList])

    useEffect(() => {
        getZLJsession({ url: 'getZLJsession', data: ZL_ADMIN })
    }, [ZL_ADMIN, getZLJsession])

    const [VideoStatus, setVideoStatus] = useState(false)
    const [MonitorStatus, setMonitorStatus] = useState(false)
    const [TalkbackStatus, setTalkbackStatus] = useState(false)

    ZLEvent.useSubscription(val => {
        setTrue()
        setUserSelect(val)
        init()
    })

    const init = () => {
        if (Ref.current) InitSDK()
        else setTimeout(init, 50)
    }

    const InitSDK = () => {
        const data = { domId: 'cmsv6flash', isVodMode: false, width: 900, height: 600 }
        const swfobject = new window.Cmsv6Player(data)
        if (typeof swfobject == 'undefined' || typeof swfobject.setWindowNum == 'undefined') setTimeout(InitSDK, 50)
        else {
            swfobject.setWindowNum(36)
            swfobject.setWindowNum(1)
            swfobject.setServerInfo(ip, port)
            setSDK(swfobject)
        }
    }

    const InitVideo = () => {
        if (SDK && UserSelect) {
            SDK.stopVideo(0)
            SDK.setVideoInfo(0, 'vehicle1-CH1')
            SDK.startVideo(0, jsession, UserSelect, 0, 1, true)
            setVideoStatus(true)
        } else {
            setImmediate(InitVideo, 50)
        }
    }

    //停止播放视频
    const reSetVideo = () => {
        SDK.reSetVideo(0)
        setVideoStatus(false)
    }

    const Monitor = () => {
        SDK.startListen(jsession, UserSelect, 0, ip, port)
        setMonitorStatus(true)
    }

    const stopMonitor = () => {
        SDK.stopListen()
        setMonitorStatus(false)
    }

    const Talkback = () => {
        SDK.startTalkback(jsession, UserSelect, 0, ip, port)
        setTalkbackStatus(true)
    }

    const stopTalkback = () => {
        SDK.stopTalkback()
        setTalkbackStatus(false)
    }

    return (
        <Modal
            className="ModalBox"
            open={Open}
            footer={null}
            maskClosable={false}
            onCancel={() => {
                reSetVideo()
                stopMonitor()
                stopTalkback()
                setFalse()
            }}
            destroyOnClose
            width={1060}
            title="指挥对讲"
            centered
        >
            <div className="ZLVideo">
                <div id="cmsv6flash" ref={Ref} />
                <div className="btn">
                    <Divider>视频控制</Divider>
                    <Button loading={VideoStatus} onClick={InitVideo}>
                        播放视频
                    </Button>
                    <Button loading={!VideoStatus} onClick={reSetVideo}>
                        重置视频
                    </Button>

                    <Divider>监听控制</Divider>
                    <Button loading={MonitorStatus} onClick={Monitor}>
                        开启监听
                    </Button>
                    <Button loading={!MonitorStatus} onClick={stopMonitor}>
                        停止监听
                    </Button>

                    <Divider>对讲控制</Divider>
                    <Button loading={TalkbackStatus} onClick={Talkback}>
                        开启对讲
                    </Button>
                    <Button loading={!TalkbackStatus} onClick={stopTalkback}>
                        停止对讲
                    </Button>
                </div>
            </div>
        </Modal>
    )
}
